<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li {
            width: 100px;
            height: 100px;
            /* background-color: red; */
            margin: 10px;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>
<body>
    <ul>
        <li>1</li>
        <li class="item">2</li>
        <li>3</li>
    </ul>
    <script>
        $(function() {
            // $("ul li:first").css("color","yellow");
            // $("ul li:eq(2)").css("color","blue");
            // 奇数 odd 偶数 even

            // 父级选择器
            // $(".son").parent()
            // 子代选择器 最亲的子代
            // $(".nav").children()
            // 选择所有的孩子
            // $(".nav").find()

            // 兄弟元素 siblings 除自身外的所有亲兄弟
            $("ul .item").siblings("li").css("color","red");

            // 第n个元素
            // $("ul li").eq(2).css("color","red");
        })
    </script>
</body>
</html>